<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 顶部标题栏 -->
        <div class="d-flex jc-center">
          <!-- 装饰线 -->
          <dv-decoration-10 style="width: 33.3%; height: 0.06rem" />
          <div class="d-flex jc-center">
            <dv-decoration-8
              :color="['#568aea', '#000000']"
              style="width: 2.5rem; height: 0.5rem"
            />
            <!-- 标题 -->
            <div class="title">
              <span class="title-text">天安数码城平台</span>
              <dv-decoration-5
                class="title-bototm"
                :dur="3"
                style="width: 300px; height: 40px"
              />
            </div>
            <!-- 装饰线 -->
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width: 2.5rem; height: 0.5rem"
            />
          </div>
          <dv-decoration-10
            style="width: 33.3%; height: 0.06rem; transform: rotateY(180deg)"
          />
        </div>

        <!-- 标题栏第二行 -->
        <div class="d-flex jc-between">
          <!-- 左侧 -->
          <div class="d-flex" style="width: 40%">
            <div class="react-right ml-4"
              style="width: 6.25rem;text-align: left;background-color: #0f1325;">
              <span class="react-before"></span>
              <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
              <!-- <span class="text">模块一</span> -->
            </div>
            <div class="react-right bg-color-blue ml-3">
              <span class="text fw-b">模块二</span>
            </div>
          </div>
          <!-- 右侧 -->
          <div class="d-flex" style="width: 40%">
            <div class="react-left bg-color-blue mr-3">
              <span class="text fw-b">模块三</span>
            </div>
            <!-- 时间 -->
            <div class="react-left mr-4" style="width: 6.25rem;background-color: #0f1325;text-align: right;">
              <span class="react-after"></span>
              <span class="text fw-b">退出</span>
            </div>
          </div>
        </div>

        <!-- 主体区域 -->
        <div class="body-box">
          <!-- GIS界面 -->
          <div class="content-box">
            <Gis></Gis>
          </div>
          <!-- 左侧概述栏 -->
          <div class="left-box" ref="left">
            <!-- <centerLeft></centerLeft> -->
          </div>
          
          <!-- 右侧概述栏 -->
          <div class="right-box" ref="right">
            <!-- <centerRight></centerRight> -->
            <!-- <Park></Park> -->
          </div>
          <!-- 底部 -->
          <div class="bottom-box" ref="bottom">
            <!-- <centerBottom></centerBottom> -->
          </div>

          <!-- 子系统菜单 -->
          <div class="child-box" ref="child"> 
            <!-- <centerLeft2></centerLeft2> -->
          </div>
          
          <!-- 左侧导航栏 -->
          <div class="menu-box">
            <!-- <subMenu></subMenu> -->
          </div>

        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { formatTime } from '../utils/index.js'

import centerRight from './centerRight'
import centerLeft from './centerLeft'
import centerBottom from './centerBottom'
import subMenu from './centerLeft1'
import centerLeft2 from './centerLeft2'

import Gis from '@/components/Building/Panorama'

import Park from './smartPark.vue'


export default {
  data() {
    return {
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    }
  },
  components: {
    centerRight,
    centerLeft,
    centerBottom,
    centerLeft2,
    subMenu,
    Gis,
    Park
  },
  mounted() {
    this.timeFn()
    this.cancelLoading()
  },
  computed:{
  },
  methods: {
    timeFn() {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
  },
}
</script>

<style lang="less" scoped>
#index {
  color: #d3d6dd;
  width: 100%;
  height: 100%;

  .bg {
    padding: 0.2rem 0.2rem 0 0.2rem;
    background-color: #000000; 
    background-position: center center;
    // border: 2px solid red;
  }

  .host-body {
    width: 100%;
    height: 100%;
    // border: 2px solid yellow;
    .title {
      position: relative;
      width: 6.25rem;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;
      
      .title-text {
        font-size: 0.3rem;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }

      .title-bototm {
        position: absolute;
        bottom: -0.375rem;
        left: 50%;
        transform: translate(-50%);
      }
    }

    // 平行四边形
    .react-left {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -0.3125rem;
        top: 0;
        height: 0.5rem;
        width: 0.5rem;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-right {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      transform: skewX(45deg);

      .react-before {
        position: absolute;
        left: -0.3125rem;
        top: 0;
        height: 0.5rem;
        width: 0.5rem;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

    .body-box {
      width: 100%;
      height: 13.5rem;
      margin-top: 0.15rem;
      position: relative;
      // border: 2px solid green;
      //GIS界面
      .content-box {
        width: 100%;
        height: 12rem;
        position: relative;

        // border: 2px solid blue;
      }
      // .left-box{
      //   width: 0.2rem;
      //   height: 100%;
      //   position: absolute;
      //   left: 0;
      //   top: 0;
      //   z-index:1;
      //   // border: 2px solid yellow;
      // }
      // .right-box{
      //   width: 0.2rem;
      //   height: 100%;
      //   position: absolute;
      //   right: 0rem;
      //   top: 0;
      //   z-index:1;
      //   // border: 2px solid yellow;
      // }
      // 智慧停车
      // .right-box-2{
      //   width: 1rem;
      //   // height: 14rem;
      //   position: absolute;
      //   left: 16rem;
      //   top: 0;
      //   z-index:1;
      //   // border: 1px solid white;
      // }
      // .bottom-box{
      //   width: 50%;
      //   height: 1rem;
      //   position: absolute;
      //   left: 24%;
      //   bottom: 0rem;
      //   z-index:1;
      //   // border: 0.025rem solid white;
      // }
      // .child-box{
      //   width: 7rem;
      //   height: 1rem;
      //   position: fixed;
      //   left: 4rem;
      //   top: 0rem;
      //   z-index:1;
      //   // border: 0.025rem solid white;
      // }
      // 左侧导航栏
      // .menu-box{
      //   width: 0.5rem;
      //   // height: 16rem;
      //   position: fixed;
      //   left: 0rem;
      //   top: 0rem;
      //   z-index:1;
      //   // border: 0.025rem solid yellowgreen;
      // }
    }
  }

}

</style>
